<template>
  <div class="journey-section">
    <div class="section-header">
      <div class="line-decoration"></div>
      <h2 class="section-title">{{ title }}</h2>
      <div class="line-decoration"></div>
    </div>
    <a v-if="moreLink" :href="`${moreLink}?id=${journeyItems[0]?.category_id}}`" class="read-more-link">{{ moreLinkText }}</a>
    
    <div class="journey-carousel">
      <Swiper
        :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
        :slides-per-view="slidesPerView"
        :space-between="30"
        :loop="loop"
        :pagination="pagination ? { clickable: true, el: '.journey-pagination' } : false"
        :navigation="{ nextEl: '.journey-button-next', prevEl: '.journey-button-prev' }"
        :autoplay="autoplay ? { delay: 5000, disableOnInteraction: false } : false"
        @resize="updateSlidesPerView"
      >
        <SwiperSlide v-for="(item, index) in journeyItems" :key="'journey-' + index">
          <div class="journey-card">
            <div class="journey-image">
              <router-link :to="`${moreLink}?id=${item.category_id}&childId=${item.id}`">
                <img :src="item.image" :alt="item.title">
              </router-link>
            </div>
            <div class="journey-content">
              <router-link :to="`${moreLink}?id=${item.category_id}&childId=${item.id}`">
                <h3 class="journey-title">{{ item.title }}</h3>
              </router-link>
              <p class="journey-date">{{ item.date }}</p>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
      <div v-if="pagination" class="journey-pagination"></div>
      <div class="journey-navigation">
        <div class="journey-button-prev">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="journey-button-next">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineProps, defineExpose } from 'vue';
// 导入Swiper相关组件和模块
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// @ts-ignore
import 'swiper/css';
// @ts-ignore
import 'swiper/css/pagination';
// @ts-ignore
import 'swiper/css/navigation';

// 定义组件接口
interface JourneyItem {
  title: string;
  date: string;
  image: string;
}

// 定义props
const props = defineProps({
  title: {
    type: String,
    default: "GOELIA'S JOURNEY"
  },
  journeyItems: {
    type: Array as () => JourneyItem[],
    required: true
  },
  moreLink: {
    type: String,
    default: '#'
  },
  moreLinkText: {
    type: String,
    default: 'Read more'
  },
  autoplay: {
    type: Boolean,
    default: false
  },
  loop: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Boolean,
    default: false
  },
  maxDesktopSlides: {
    type: Number,
    default: 3
  }
});

// Swiper模块
const SwiperAutoplay = Autoplay;
const SwiperPagination = Pagination;
const SwiperNavigation = Navigation;

// 响应式slide数量
const slidesPerView = ref(props.maxDesktopSlides);

// 更新每个视图显示的slide数量
const updateSlidesPerView = () => {
  if (window.innerWidth <= 480) {
    slidesPerView.value = 1;
  } else if (window.innerWidth <= 768) {
    slidesPerView.value = 2;
  } else {
    slidesPerView.value = props.maxDesktopSlides;
  }
};

// 监听窗口大小变化
onMounted(() => {
  updateSlidesPerView();
  window.addEventListener('resize', updateSlidesPerView);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateSlidesPerView);
});

// 暴露方法
defineExpose({
  updateSlidesPerView
});

// 定义组件名称
defineOptions({
  name: 'JourneyCarousel'
});
</script>

<style lang="scss" scoped>
.journey-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 80px;
  position: relative;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 55px;
  position: relative;
}

.section-title {
  font-size: 24px;
  font-weight: 500;
  color: #232323;
  margin: 0 20px;
  letter-spacing: 2px;
  text-align: center;
  min-width: 180px;
}

.line-decoration {
  flex: 1;
  height: 1px;
  background-color: #232323;
  max-width: 450px;
}

.read-more-link {
  position: absolute;
  top: 40px;
  right: 0px;
  color: #232323;
  text-decoration: none;
  font-size: 14px;
  text-decoration: underline;
}

.journey-carousel {
  position: relative;
  margin: 30px 0;
  
  :deep(.swiper) {
    width: 100%;
    padding-bottom: 50px;
  }
  
  :deep(.swiper-slide) {
    height: auto;
    display: flex;
    justify-content: center;
  }
  
  .journey-card {
    cursor: pointer;
    width: 100%;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    &:hover .journey-image img {
      transform: scale(1.05);
    }
  }
  
  .journey-image {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    margin-bottom: 15px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    @media (max-width: 768px) {
      height: 220px;
    }
    
    @media (max-width: 480px) {
      height: 200px;
    }
  }
  
  .journey-content {
    padding: 0 5px;
    
    .journey-title {
      font-size: 16px;
      font-weight: 500;
      color: #232323;
      margin: 0 0 8px;
      line-height: 1.4;
    }
    
    .journey-date {
      font-size: 14px;
      color: #767676;
      margin: 0;
    }
  }
}

.journey-navigation {
  .journey-button-prev,
  .journey-button-next {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: #232323;
    
    &:hover {
      background: #f5f5f5;
    }
    
    @media (max-width: 768px) {
      width: 30px;
      height: 30px;
      svg {
        width: 18px;
        height: 18px;
      }
    }
  }
  
  .journey-button-prev {
    left: -20px;
    
    @media (max-width: 768px) {
      left: 0;
    }
  }
  
  .journey-button-next {
    right: -20px;
    
    @media (max-width: 768px) {
      right: 0;
    }
  }
}

:deep(.journey-pagination) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
    margin: 0 5px;
    
    &-active {
      background: #232323;
    }
  }
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: 50px;
  }
  
  .read-more-link {
    top: 30px;
  }
  
  .section-title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 20px;
  }
  
  .line-decoration {
    max-width: 80px;
  }
}
</style> 